<template>
  <div class="friends">
    <van-list v-model="loading" :finished="finished" finished-text="没有更多了" @load="onLoad">
      <div class="list" @click="goInfo(item.id)" v-for="item in list" :key="item.id">
        <div class="list_left">
          <img :src="item.img">
          <div class="text">
            <span class="text_name">{{item.name}}</span>
            <span class="text_content">签名：{{item.signature}}</span>
          </div>
        </div>
        <div class="button" @click="clickNuu()">
          <van-icon name="plus" size="px" color="red"/>
          <span>关注</span>
        </div>
      </div>
    </van-list>
  </div>
</template>

<script>
import { Icon, Cell, List } from 'vant'

export default {
  components: {
    [Icon.name]: Icon,
    [Cell.name]: Cell,
    [List.name]: List
  },
  data() {
    return {
      list: [
        {
          id: 0,
          img:
            'http://n.sinaimg.cn/translate/567/w781h586/20190425/KPde-hvvuiyn9279369.jpg',
          name: '遥远',
          signature: '其帆远航'
        },
        {
          id: 1,
          img:
            'https://img.yzcdn.cn/public_files/2017/10/24/e5a5a02309a41f9f5def56684808d9ae.jpeg',
          name: '艰辛',
          signature: '生活痛苦。。。。'
        },
        {
          id: 2,
          img: 'http://img.sccnn.com/bimg/338/29147.jpg',
          name: '努力',
          signature: '少壮不努力，老大徒伤悲'
        },
        {
          id: 3,
          img:
            'https://img.52z.com/upload/news/image/20180129/20180129092451_31905.jpg',
          name: '。。。。',
          signature: '~~~~~~~'
        },
        {
          id: 4,
          img:
            'https://img.52z.com/upload/news/image/20180129/20180129092455_98714.jpg',
          name: '忧伤',
          signature: '世间无论什么都很优秀'
        },

        {
          id: 5,
          img:
            'https://img.52z.com/upload/news/image/20180129/20180129092453_15640.jpg',
          name: '某某',
          signature: '箭头天王积分活动和'
        },
        {
          id: 6,
          img:
            'https://img.52z.com/upload/news/image/20180129/20180129092454_45398.jpg',
          name: '盛情',
          signature: 'kdffdbvgg'
        }
      ],
      finished: false,
      loading: false
    }
  },
  methods: {
    onLoad() {
      // 异步更新数据
      setTimeout(() => {
        // 加载状态结束
        this.loading = false
        for (let i = 0; i < 5; i++) {
          this.list.push(this.list[i])
        }
        // 数据全部加载完成
        if (this.list.length >= 10) {
          this.finished = true
        }
      }, 500)
    },
    goInfo(id) {
      this.$router.push({
        path: '/userDtails',
        id: id
      })
    }
  }
}
</script>

<style lang="less">
.friends {
  padding: 10px 0;
  box-sizing: content-box;
  .list {
    width: 100%;
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    padding: 10px 10px;
    box-sizing: border-box;
    border-bottom: 1px solid #e5e5e5;
    font-size: 16px;
    background: #fff;
    .list_left {
      display: flex;
      flex-direction: row;
      justify-content: flex-start;
      img {
        width: 35px;
        height: 35px;
        border-radius: 50%;
      }
      .text {
        margin-left: 5px;
        display: flex;
        flex-direction: column;
        .text_name {
          font-size: 14px;
          display: inline-block;
        }
        .text_content {
          font-size: 12px;
          color: #e5e5e5;
        }
      }
    }
    .button {
      padding: 3px 5px;
      box-sizing: border-box;
      width: 60px;
      height: 30px;
      border-radius: 5px;
      border: 1px solid #e5e5e5;
      cursor: pointer;
      span {
        display: inline-block;
        font-size: 14px;
        color: #e5e5e5;
      }
    }
  }

  &-group {
    margin-bottom: 15px;
  }

  &-links {
    padding: 15px 0;
    font-size: 12px;
    text-align: center;
    background-color: #fff;

    .van-icon {
      display: block;
      font-size: 24px;
    }
  }
}
</style>
